<template>
  <div>
    <DialogNew v-model="is_show" @close="close" title="规格管理" width="500px">
      <div class="padding-sm" v-loading="loading">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
          <el-form-item label="规格名称" prop="goods_spec_name">
            <el-input
              v-model="form.goods_spec_name"
              placeholder="请输入规格名称"
            />
          </el-form-item>
          <el-form-item label="规格属性" prop="goods_spec_value_name">
            <div class="attr">
              <template
                v-for="(item, index) in form.goods_spec_value_name"
                :key="index"
              >
                <el-input
                  v-model="form.goods_spec_value_name[index]"
                  placeholder="请输入规格属性"
                  style="margin-bottom: 10px"
                />
              </template>
              <div class="add-attr" @click="addAttr">+继续添加</div>
            </div>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="is_show = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" v-repeat>
          确定
        </el-button>
      </template>
    </DialogNew>
  </div>
</template>

<script setup>
  import DialogNew from '@/components/DialogNew/index.vue'
  import { addgoodsArrt, editgoodsArrt } from '@/api/goods'
  import { message } from '@/utils/helper'
  const is_show = ref(false)

  const loading = ref(false)

  const form = reactive({
    id: undefined,
    goods_spec_name: '',
    goods_spec_value_name: [''],
    type: 1,
    status: 1,
  })
  const action = ref('add')
  const open = (type = 'add', row = null) => {
    action.value = type
    if (row) {
      const { id, goods_spec_name, type, status, specAttr } = row
      Object.assign(form, {
        id,
        goods_spec_name,
        goods_spec_value_name: specAttr.map(
          (item) => item.goods_spec_value_name
        ),
        type,
        status,
      })
    }
    is_show.value = true
  }

  const close = () => {
    action.value = 'add'
    formRef.value.resetFields()
    Object.assign(form, {
      id: undefined,
      goods_spec_name: '',
      goods_spec_value_name: [''],
      type: 1,
      status: 1,
    })
   
  }

  const rules = reactive({
    goods_spec_name: {
      required: true,
      message: '请输入规格名称',
      trigger: 'change',
    },
    goods_spec_value_name: {
      required: true,
      message: '请输入规格属性',
      trigger: 'change',
    },
  })

  const emits = defineEmits(['fetch-data'])

  const formRef = ref(null)
  const handleSubmit = () => {
    formRef.value
      .validate((valid) => {
        if (valid) {
          loading.value = true
          action.value === 'add'
            ? addgoodsArrt(form).then((res) => {
                if (res.code === 200) {
                  message('添加成功')
                  is_show.value = false
                  emits('fetch-data')
                }
              })
            : editgoodsArrt(form).then((res) => {
                if (res.code === 200) {
                  message('编辑成功')
                  is_show.value = false
                  emits('fetch-data')
                }
              })
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
  const addAttr = () => {
    form.goods_spec_value_name.push('')
  }
  defineExpose({ open })
</script>

<style lang="scss" scoped>
  .arrt {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .add-attr {
    border: 1px solid #409eff;
    color: #409eff;
    border-radius: 4px;
    padding: 0px 8px;
    margin-top: 10px;
    cursor: pointer;
    width: 85px;
  }
</style>
